<template>
  <div class="product_list">
    <ul class="list_main">
      <li v-for="(item, index1) in listshuju">
        <router-link class="del_left" :to="{path:'/integraldetails',query:{id:item.id}}">
          <img :src="item.thumb" :alt="item.title">
          <h2>{{item.title}}</h2>
          <p>{{item.price}}<span>积分</span></p>
          <router-link class="del_exchange" :to="{path:'/integraldetails',query:{id:item.id}}">兑换</router-link>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  props:["listshuju"],
  components:{

  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.product_list{
  width: 100vw;
  margin-bottom: 13.3vw;
  .list_main{
    width: @width;
    margin: 3vw auto 0 auto;
    overflow: hidden;
    zoom:1;
    li{
      width: 45vw;
      display: inline-block;
      margin-bottom: 3vw;
      float: left;
      .del_left{
        display: block;
        width: 100%;
        height: 57vw;
        text-align: left;
        font-size: @h3_font_size;
        img{
          width: 45vw;
          height: 40vw;
          margin-bottom: 3vw;
        }
        h2{
          width: 45vw;
        }
        h2,p{
          color: @color7;
          line-height: 5vw;
          .font_space(1);
        }
        p{
          color: @color;
          font-weight: 700;
          width: 28vw;
          display: inline-block;
          margin-top: 3vw;
          span{
            margin-left: 1vw;
            font-weight: 500;
          }
        }
        .del_exchange{
          display: inline-block;
          width: 15vw;
          height: 7vw;
          font-size: @h3_font_size;
          line-height: 7vw;
          color: @color1;
          background-color: @color;
          text-align: center;
          border-radius: 1vw;
          position: relative;
          top: -3vw;
        }
      }
    }
    li:nth-last-child(2n){
      float: right;
    }
  }
}
</style>